<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据表格</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>

<script src="layui/layui.js"></script>

<body>

<table id="demo" lay-filter="test"></table>

</body>

<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,toolbar:true//工具栏
            ,url: 'music/findByPage' //数据接口
            //开启分页
            ,page:{limit:2//每页显示2条（ 向后台传值，每页显示条数 ）
                ,limits:[1,2,3] //可选每页条数
                ,first: '首页' //首页显示文字，默认显示页号
                ,last: '尾页'
                ,prev: '<em>←</em>' //上一页显示内容，默认显示 >
                ,next: '<i class="layui-icon layui-icon-next"></i>'
                ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
            }
            ,cols: [[ //表头
                {field: 'musicId', title: '编号', width:180, sort: true, fixed: 'left'}
                ,{field: 'musicName', title: '名称', width:180}
                ,{field: 'musicAlbumName', title: '专辑', width:180, sort: true}
                ,{field: 'musicAlbumPicurl', title: '图片', width:180,templet:'<div><img style="height: 40px;width: 40px;" src="{{ d.musicAlbumPicurl}}"> </div>'}
                ,{field: 'musicMp3url', title: '音乐地址', width:180}
                ,{field: 'musicArtistName', title: '歌手', width:180}
                ,{field: 'sheetId', title: '所属歌单'}
                ,{field:"right",title:"操作",toolbar: '#barDemo'}//添加操作按钮
            ]]
        });

        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    // 向服务端发送删除请求
                    // 此处可以发送ajax
                    $.ajax({
                        url: "music/delete",
                        success: function(backdata){
                            table.render({});
                        }
                    });

                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                // 向服务端发送更新请求
                // 同步更新缓存对应的值
                obj.update({
                    musicName: '葫芦娃',
                });
            }
        });



    });
</script>

<!-- 如下script可以定义操作按钮在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



</html>